<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" >
        <el-form-item>
          <el-input v-model="search_dbname" placeholder="连接名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search_oracledb">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add_oracledb">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              stripe height="600"
              max-height="500"
              highlight-current-row style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column type="index" width="60">
      </el-table-column>

      <el-table-column prop="db_name" disabled label="名称" width="250" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.db_name }} </template>
      </el-table-column>

      <el-table-column prop="ip" label="IP地址" width="150" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.ip }} </template>
      </el-table-column>

      <el-table-column prop="port" label="端口号" width="100" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.port }} </template>
      </el-table-column>

      <el-table-column prop="sid" label="实例名" width="100" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.sid }} </template>
      </el-table-column>

      <el-table-column prop="username" label="数据库用户"width="200" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.username }} </template>
      </el-table-column>

      <el-table-column prop="add_time" label="添加时间"width="100" align="center">
        <template slot-scope="scope"> {{ scope.row.fields.add_time|formatDate }} </template>
      </el-table-column>

      <el-table-column label="操作"  align="center">
        <template slot-scope="scope">

          <el-button size="small" @click="handleEdit(scope.row.fields)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row.fields)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 40]"
      :page-size="pagesize"

      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

    <!--编辑界面-->
    <el-dialog title="编辑Oracle连接"
               :visible.sync="editFormVisible"
               :close-on-click-modal="false"
               v-show="editFormVisible"
               width="30">
      <el-form :model="editForm" label-width="150px" :rules="addFormRules" ref="editForm">
        <el-form-item label="连接名称" prop="db_name" >
          <el-input disabled v-model="editForm.db_name" ></el-input>
        </el-form-item>
        <el-form-item label="ip地址" prop="ip">
          <el-input v-model="editForm.ip" ></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input v-model="editForm.port" ></el-input>
        </el-form-item>
        <el-form-item label="实例名" prop="sid">
          <el-input v-model="editForm.sid" ></el-input>
        </el-form-item>
        <el-form-item label="数据库用户" prop="username" >
          <el-input v-model="editForm.username" ></el-input>
        </el-form-item>
        <el-form-item label="数据库密码" prop="password">
          <el-input type="password" v-model="editForm.password" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click.native="update_oracleinfo"
        >提交</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增Oracle连接"
               :visible.sync="addFormVisible"
               :close-on-click-modal="false"
               v-show="addFormVisible"
               width="30">
      <el-form :model="addForm" label-width="150px" :rules="addFormRules" ref="addForm">
        <el-form-item label="连接名称" prop="db_name">
          <el-input v-model="addForm.db_name" ></el-input>
        </el-form-item>
        <el-form-item label="ip地址" prop="ip">
          <el-input v-model="addForm.ip" ></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input v-model="addForm.port" ></el-input>
        </el-form-item>
        <el-form-item label="实例名" prop="sid">
          <el-input v-model="addForm.sid" ></el-input>
        </el-form-item>
        <el-form-item label="数据库用户" prop="username" >
        <el-input v-model="addForm.username" ></el-input>
      </el-form-item>
        <el-form-item label="数据库密码" prop="password">
          <el-input type="password" v-model="addForm.password" ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click.native="addSubmit"
                   >提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
  import {getOracledbs,deleteOracledb,updateOracledb,addOracledb} from '../../api/etl_test_requests'

  export default {
    name: "OracleInfo",
    data(){
      return{
        search:'',
        currentPage: 1, //初始页
        pagesize: 10,    //    每页的数据
        tableData: [],
        addFormVisible:false,
        editFormVisible:false,
        listLoading: false,
        search_dbname:'',
        addForm:{
          db_name  :'',
          ip       :'',
          port     :'',
          sid      :'',
          username :'',
          password :'',
        },
        editForm:{
          db_name  :'',
          ip       :'',
          port     :'',
          sid      :'',
          username :'',
          password :'',
        },
        deleteForm:{
          db_name  :'',
        },
        addLoading: false,
        addFormRules: {
          db_name: [
            { required: true, message: '请输入连接名', trigger: 'blur' }
          ]
        },
      }
    },

    methods:{
      csh(){
        getOracledbs({  // 此处名字不可更改
          content: this.search,   // 这里才是真正传递的参数
        }).then((response)=>{
          var res =response['data'].list
          this.tableData=res
          console.log(response)
        })
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
      handleEdit: function (row) {
        console.log(row);
        this.editFormVisible = true;
        this.editForm = row;
      },

      add_oracledb:function () {
        this.addFormVisible = true;
        this.addForm={
          db_name  :'',
            ip       :'',
            port     :'',
            sid      :'',
            username :'',
            password :'',
      }
    },

      handleDel: function (row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.deleteForm.db_name=row.db_name
          deleteOracledb(this.deleteForm).then((response)=>{
              var res=response['data'];
              if(res.msg==='success'){
                this.editFormVisible = false;
                this.$message.success('删除成功');
                this.csh()
              }
              else {
                this.$message.error('连接测试失败，请修改连接');
              }
              console.log(res)
            })

        }).catch(() => {

        });
      },

      update_oracleinfo() {
        updateOracledb(this.editForm).then((response)=>{
        var res=response['data'];
        if(res.msg==='success'){
          this.editFormVisible = false;
          this.$message.success('保存成功');
          this.csh()
        }
        else {
          this.$message.error('连接测试失败，请修改连接');
        }
        console.log(res)
      })
  },

      addSubmit() {
        addOracledb(this.addForm).then((response)=>{
            var res=response['data'];
           if(res.msg==='success'){
             this.addFormVisible = false;
             this.$message.success('保存成功');
             this.csh()
           }
           else {
             this.$message.error('连接测试失败，请修改连接');
           }
            console.log(res)
          })

      },
      search_oracledb(){
        getOracledbs({  // 此处名字不可更改
            content: this.search_dbname   // 这里才是真正传递的参数
          }).then((response)=>{
          // var response = typeof response=='string'?JSON.parse(response.bodyText):response;
          var res=response['data'].list
          this.tableData=res
          console.log(res)
        })

      }
    },

    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    },
    created(){this.csh()},
  }
</script>

<style scoped>

</style>
